<template>
  <el-dialog title="优秀案例分析" :close-on-click-modal="false" :destroy-on-close="true" width="600px" :visible.sync="isShow" :before-close="closeBox">
    <div class="comment-box" v-for="(item, index) in cases.finishedList" :key="index">
      <img :src="item.headImgUrl" alt="" class="comment-logo">
      <div class="comment-con" style="width: 350px;">
        <div class="comment-name">{{item.stuName}}</div>
        <el-button type="text" icon="el-icon-time" size="mini" class="comment-time">{{item.finishedTime}}&nbsp;用时：{{item.duration}}</el-button>
      </div>
      <div class="like-box">
        <el-button type="text" icon="el-icon-thumb" @click="like(item, index)" :disabled="isDisabled" class="like-con" :class="{'active': item.likeType===2}"></el-button>
        <el-tag type="info" class="like-con">{{item.likeNum}}</el-tag>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { excellentList, like } from '@/api/student/training/caseAnalyse'
export default {
  props: ['id'],
  data () {
    return {
      isShow: true,
      isDisabled: false,
      cases: {
        caseName: 0,
        caseRequest: 0,
        className: 0,
        finishedList: []
      }
    }
  },
  methods: {
    async excellentList () {
      const res = await excellentList({
        resourceCaseId: this.id
      })
      if (res.code === '200') {
        this.cases = {
          caseName: res.data.caseName,
          caseRequest: res.data.caseRequest,
          className: res.data.className,
          finishedList: res.data.finishedList.map(item => ({
            duration: item.duration,
            finishedTime: item.finishedTime,
            headImgUrl: item.headImgUrl,
            likeNum: item.likeNum,
            score: item.score,
            stuBatchId: item.stuBatchId,
            stuId: item.stuId,
            stuName: item.stuName,
            likeType: 1
          }))
        }
      }
    },
    async like (item, index) {
      this.isDisabled = true
      const res = await like({
        stuBatchId: item.stuBatchId,
        likeType: item.likeType
      })
      if (res.code === '200') {
        this.isDisabled = false
        this.$message.success(item.likeType === 1 ? '点赞成功' : '取消成功')
        this.cases.finishedList[index].likeNum = item.likeType === 1 ? (Number(item.likeNum) + 1) : (Number(item.likeNum) - 1)
        this.cases.finishedList[index].likeType = item.likeType === 1 ? 2 : 1
      } else {
        this.isDisabled = false
        this.$message.error(res.message)
      }
    },
    closeBox () {
      this.$emit('handleEmit')
    }
  },
  mounted () {
    this.excellentList()
  }
}
</script>

<style scoped lang="scss" rel="stylesheet/scss">
</style>
